<template>
  <div class="service_main">
    <head-top v-if="status===1" head-title="监理" release="立即发布"></head-top>
    <!--<head-top v-if="status===1" head-title="监理" release="立即发布" @release="gorelease"></head-top>-->
    <head-top v-else head-title="监理"></head-top>
    <div class="forum-wrapper">
      <div class="vfor" v-for="(list,index) in detail" :key="index">
        <div @click="$router.push('/ServiceDetail/'+list.id)">
          <div class="help_top">
            <div class="help_title border-bottom">
              <img :src="list.head_pic" alt="">
              <div class="help_msg">
                <div class="msg_top">
                  <p>{{list.name}}</p>
                  <p>
                  </p>
                </div>
                <div class="msg_bottom">
                  <p>{{list.areas_name}}</p>
                </div>
              </div>
            </div>
          </div>
          <div class="desc-pic">
            <div class="desc">
              {{list.content}}
            </div>
            <div class="pic_img clearfix">
              <div v-for="(item,index) in list.img" :key="index" class="img_li">
                <div class="img" v-lazy:background-image="item"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <div class="default" v-show="!detail.length && !noResult">
      <p>数据加载中</p>
    </div>
    <div class="default1" v-show="noResult">
      <p>抱歉！暂无数据</p>
    </div>
    <v-footer></v-footer>
  </div>
</template>
<style lang="scss">
  @import '../../common/sass/mixin.scss';

  .service_main {
    width: 100%;
    padding-bottom: 60px;
    padding-top:50px;
    .forum-wrapper {
      background: #fff;
      .vfor {
        border-bottom: 10px solid #f2f2f2;
        &:last-child {
          border-bottom: none;
        }
        .help_top {
          width: 100%;
          .help_title {
            width: 100%;
            height: 65px;
            img {
              width: 44px;
              height: 44px;
              border-radius: 50%;
              float: left;
              margin-top: 10px;
              margin-left: 10px;
            }
            .help_msg {
              float: right;
              width: 83%;
              height: 65px;
              .msg_top {
                width: 100%;
                height: 25px;
                margin-top: 12px;
                p{
                  font-size: 15px;
                }
              }
              .msg_bottom {
                width: 100%;
                height: 32px;
                p {
                  float: left;
                  line-height: 15px;
                  font-size: 12px;
                  color: #808080;
                }
              }
            }
          }
        }
        .desc-pic {
          padding: 10px;
          .desc {
            line-height: 16px;
          }
          .pic_img {
            width: 100%;
            .img_li {
              width: 24%;
              height: 80px;
              margin-top: 1%;
              float: left;
              margin-left: 1%;
              .img {
                width: 100%;
                height: 100%;
                background-size: cover;
                background-color: #f2f2f2;
              }
            }
          }
        }
      }
    }
    .default {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/loading.gif") no-repeat;
      background-size: 40px 40px;
      background-position: center;
      padding-bottom: 100px;
      p {
        font-size: 15px;
        color: #666;
        margin-top: 100px;
      }
    }
    .default1 {
      width: 100%;
      flex: 1;
      display: inline-flex;
      padding-top: 100px;
      justify-content: center;
      align-items: center;
      background: url("../../assets/default.png") no-repeat;
      background-size: 100px 100px;
      background-position: center;
      padding-bottom: 60px;
      p {
        font-size: 15px;
        color: #0b7ad9;
        margin-top: 110px;
      }
    }
  }
</style>
<script>
  import headTop from '../header/Header.vue'
  import Footer from '../footer/Footer.vue'
  import { getService } from '../../api/supervise.js'
  import { Toast } from 'mint-ui'

  export default {
    name: 'Service',
    data () {
      return {
        lists: [],
        status: '',
        noResult: false
      }
    },
    components: {
      headTop,
      'v-footer': Footer
    },
    // 设置缓存从哪个页面返回
    beforeRouteEnter: (to, from, next) => {
      if (from.name === 'ServiceDetail') {
        to.meta.isBack = true
      }
      next()
    },
    activated () {
      if (!this.$route.meta.isBack) {
        this._getService()
      }
      this.$route.meta.isBack = false
    },
    created () {
      this._getService()
    },
    methods: {
      _getService () {
        this.noResult = false
        getService().then(res => {
          // console.log(res)
          if (res.code === 200) {
            this.lists = res.data.data
            this.status = res.data.status
          }
          if (this.lists.length === 0) {
            this.noResult = true
          } else {
            this.noResult = false
          }
        })
      }
    },
    computed: {
      // 最新发布的数据在最前面
      detail () {
        if (this.lists.length < 0) {
          Toast({
            message: '暂无数据',
            position: 'middle',
            duration: 2500
          })
        } else {
          return this.lists
        }
      }
    }
  }
</script>
